@import "../commonFunc";

.head_container {
    height: px2rem(70);
    @include bgColor($defaultColor);
    padding: 0 px2rem(57);
    //overflow: hidden;
    user-select: none;
    @include position(relative);

    .logo_box {
        //@include widthHeight(px2rem(300), 100%);
        height: 100%;
        @include position(relative);

        .logo_text {
            @include displayFlex;

            img {
                width: px2rem(80);
            }

            p {
                @include color(white);
                margin-top: px2rem(10);
                //margin-left: 10px;
                @include fontSize(px2rem(24))
            }
        }

        .name_en {
            width: 400px;
            @include position;
            @include trbl('', '', px2rem(4), 0);
            @include fontSize(px2rem(12));
            @include color(white);
        }

    }

    .nav_list {
        height: 100%;
        @include position;
        left: 45%;
        //width: calc(100% - 30rem);
        //height: 100%;
        //padding-left: px2rem(100);

        ul {
            @include widthHeight(100%);
            @include displayFlex;
            padding-top: px2rem(4);

            li {
                width: px2rem(154);
                //height: px2rem(40);
                height: 100%;
                margin-right: px2rem(10);
                cursor: pointer;
                @include displayFlex;
                @include position(relative);
                padding: 0 px2rem(7);
                @function borderColor() {
                    @return px2rem(1) solid rgba(227, 202, 171, .4);
                }

                p {
                    width: 100%;
                    height: px2rem(20);
                    @include color(white);
                    @include displayFlex;
                    @include fontSize(px2rem(16));
                }

                &:last-of-type {
                    margin-right: 0;
                }


                &.active, &:hover {
                    background-color: #2562A1;

                    p {
                        color: #F7C777;
                    }

                }
            }
        }
    }

    .user_operate {
        height: 100%;
        @include displayFlex;
        margin-left: px2rem(60);

        .info_style {
            margin-right: px2rem(20);
            @include displayFlex;
            cursor: pointer;

            .ant-scroll-number {
                min-width: auto;
                border-radius: 50%;
                line-height: normal;
                height: auto;
                @include displayFlex;
                border: none;
                box-shadow: none;
                @include bgColor(#BA3A34);
                right: px2rem(10);
                top: px2rem(2);

                p {
                    margin-right: 0;
                    @include fontSize(px2rem(12))
                }
            }

            .text {
                @include color(white);
                @include fontSize(px2rem(16))
            }

            .anticon {
                @include color(white);
                @include fontSize(px2rem(25));
                margin-right: px2rem(5);
            }

            &:hover {
                .text {
                    @include color($defaultActiveColor)
                }
            }
        }

        .person_center {
            @include displayFlex;

            .user_name {
                @include displayFlex;
                @include color(white);
                //@include fontSize(px2rem(16));

                .anticon {
                    @include color(white);
                    @include fontSize(px2rem(26));
                }

                .name {
                    margin: 0 px2rem(10);
                    cursor:pointer;
                    @include fontSize(px2rem(20))
                }

                .arrow {
                    .anticon {
                        @include fontSize(px2rem(14))
                    }
                }

                .cut_off_rule {
                    margin: 0 15px;
                }

                .icon_tuichu {
                    font-size: px2rem(20);
                }
            }

        }
    }


    .ant-dropdown {
        min-width: auto !important;

        &.user_dropdown {
            width: px2rem(120);
        }

        &.info_dropdown {
            width: px2rem(300);

            > div {
                margin-top: px2rem(19);
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
                @include bgColor($defaultColor);
                border-radius: 8px;
                @include position(relative);
            }

            h3 {
                @include bgColor($defaultColor);
                border-radius: 8px 8px 0 0;
                height: px2rem(50);
                padding-left: px2rem(16);
                @include displayFlex;
                justify-content: flex-start;
                @include color(white);
                @include fontSize(px2rem(16))
            }

            .info_container {
                //@include position;
                max-height: px2rem(395);
                //@include trbl(px2rem(50), 0, 0, 0);
                overflow: auto;
                @include scrollBar(0);
                @include bgColor;
                border-radius: 0 0 8px 8px;
                padding: 0 px2rem(16);

                ul {
                    li {
                        border-bottom: 1px solid rgba(135, 96, 63, .15);
                        @include position(relative);
                        padding: px2rem(20) 0 px2rem(20) px2rem(32);
                        cursor: pointer;

                        &:hover {
                            .info {
                                @include color($yellowColor)
                            }
                        }

                        .info {
                            @include color(#87603F);
                            @include fontSize;
                            @include visibleFont;
                            @include lineHeight(px2rem(16));
                        }

                        .time {
                            margin-top: px2rem(12);
                            @include color(rgba(135, 96, 63, .8));
                            height: px2rem(12);
                            @include fontSize(px2rem(12));
                            @include displayFlex;
                            justify-content: flex-start;
                        }

                        .anticon {
                            @include position;
                            @include trbl(px2rem(20), '', '', 0);
                            @include widthHeight(px2rem(24));
                            @include bgColor(#C03202);
                            @include displayFlex;
                            @include color(white);
                            @include fontSize(px2rem(20));
                        }
                    }
                }

                .noData {
                    @include widthHeight(100%);
                    padding: px2rem(50) 0;
                    @include displayFlex;
                }
            }
        }

        .ant-dropdown-menu {
            margin-top: px2rem(17);
            box-shadow: none;
            border-radius: 0;
            @include bgColor($defaultColor);
            padding: 0;

            li {
                height: px2rem(40);
                border-bottom: px2rem(1) solid rgba(255, 255, 255, .3);
                @include displayFlex;
                justify-content: flex-start;
                padding-left: px2rem(18);

                &:hover {
                    @include bgColor(transparent);

                    p {
                        @include color($defaultActiveColor)
                    }
                }

                p {
                    @include color(white);
                    //@include fontSize(px2rem(16))
                }
            }
        }
    }
}